<template>
  <div class="setrole">
    <el-dialog :title="`为【${roleName}】分配权限`" :visible="roleShow">
      <!-- 树状组件 -->
      <!-- 
        check-strictly
        一个重要参数 
        在显示复选框的情况下，
        是否严格的遵循父子不互相关联的做法，
        默认为 false -->
      <el-tree ref="mytree" :data="list" show-checkbox :check-strictly="true" default-expand-all node-key="id"
        :props="propObj"></el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="setBtn_sub">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入根据id查询当前角色权限接口
import { getRoleDeaiApi, setRoleRightApi } from '@/api/setting'
// 导入获取权限数据的方法
import { getAllPerApi } from '@/api/permission'
export default {
  // roleName：当前分配权限的角色名称
  // dialogShow：控制分配权限的显示与隐藏
  props: ['roleName', 'roleShow'],
  data () {
    return {
      // 权限的数据源
      list: [],
      // tree 的配置信息
      propObj: {
        label: 'name'
      },
      // 当前操作角色的id
      roleId: ''
    }
  },
  methods: {
    // 提交权限分配
    async setBtn_sub () {
      // 通过getCheck.... 获取当前哪些框被选择
      const permIds = this.$refs.mytree.getCheckedKeys()
      // 提交数据
      console.log('ssssss')
      console.log(this.roleId)
      console.log('222222')
      console.log(permIds)
      await setRoleRightApi({
        id: this.roleId,
        permIds: permIds
      })
      // 提示成功
      this.$message.success('分配权限成功')
      this.$emit('update:roleShow', false)
    },
    // 根据id查询当前角色权限
    async getRightById (id) {
      // 接收父组件传过来的当前行的id
      this.roleId = id
      const res = await getRoleDeaiApi(id)
      console.log(res.data)
      // 通过keys设置到树状结构中
      this.$refs.mytree.setCheckedKeys(res.data.permIds)
    },
    // 得到所有的权限数据
    async getAllPer () {
      const res = await getAllPerApi()
      // 保存所有的权限数据
      this.list = this.trunData(res.data, '0')
    },
    // 定义一个方法用来将并列结构转为树形数据
    trunData (arr, pid) {
      const res = []
      arr.forEach(item => {
        if (item.pid === pid) {
          const children = this.trunData(arr, item.id)
          if (children.length > 0) {
            item.children = children
          }
          res.push(item)
        }
      })
      return res
    },
    // 取消
    cancel () {
      this.$emit('update:roleShow', false)
    }
  },
  created () {
    this.getAllPer()
  }
}
</script>

<style lang="scss">
.setrole {}
</style>
